<template>
    <div id="top-menu" class="top-menu">
        <a :href="github_url" target="_blank" class="github-link">{{ t("message.github_store") }}</a>

        <div id="lang" class="lang">
            {{ t("message.page_language") }}
            <select v-model="selectedLanguage" class="language-selector" @change="changeLanguage">
                <option value="en">English</option>
                <option value="zh">中文</option>
            </select>
        </div>

        <button class="donate-button" @click="donate">{{ t("message.donate_button") }}</button>
    </div>
</template>

<script setup lang="ts">
import {useI18n} from 'vue-i18n';
import {ref} from 'vue';
import router from '../router';

const github_url = "https://github.com/mzdk100/rigela";

const {t, availableLocales, locale} = useI18n();
const selectedLanguage = ref(locale.value);

const changeLanguage = (event: Event) => {
    const newLocale = (event.target as HTMLSelectElement).value;
    const Languages: string[] = availableLocales;
    if (Languages.includes(newLocale)) {
        locale.value = newLocale as any;
    }
};

const donate = () => {
    router.push("/donate");
};

</script>

<style scoped>
.top-menu {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.github-link {
    margin-right: 30px;
}

.language-selector {
    margin-right: 30px;
}

.donate-button {
    margin-right: 10px;
    background: yellow;
}
</style>